<template>
    <div id="index" ref="appRef">
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <div class="d-flex jc-center">
            <dv-decoration-10 class="dv-dec-10" />
            <div class="d-flex jc-center">
              <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
              <div class="title">
                <span class="title-text">指标概览</span>
                <dv-decoration-6
                  class="dv-dec-6"
                  :reverse="true"
                  :color="['#50e3c2', '#67a1e5']"
                />
              </div>
              <dv-decoration-8
                class="dv-dec-8"
                :reverse="true"
                :color="decorationColors"
              />
            </div>
            <dv-decoration-10 class="dv-dec-10-s" />
          </div>
  
          <!-- 第二行 -->
          <div class="d-flex jc-between px-2">
            <div class="d-flex aside-width">
              <div class="react-left ml-4 react-l-s">
                <span class="react-before"></span>
                <span class="text" @click="goToHomePage">返回首页</span>
                
              </div>
              
              <div class="react-left ml-3" style=" width:260px;">
                <span class="text">{{ subtitle[1] }}</span>
              </div>

            </div>
            <div class="d-flex aside-width">
              <div class="react-right mr-3" style="background-color: #0f1325;width:250px;" > 
                <span class="text fw-b">{{ subtitle[2]}}</span>
              </div>
              <div class="react-right mr-4 react-l-s">
               
                <div class="react-after" style="width: 300px;">
                  <el-select v-model="selectedOption" filterable placeholder="请选择" style="background-color:#0f1325">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </div>
          <div class="body-box">
              <div style="width: 100%;height: 100%;">
                  <WardView :title="secondColumnValues" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
    
  <script lang="ts">
  import { defineComponent, ref, reactive, onMounted, onUnmounted, computed, getCurrentInstance, watch } from "vue";
  import { formatTime } from "@/utils/index";
  import { WEEK } from "@/constant/index";
  import useDraw from "@/utils/useDraw";
  import { title, subtitle, moduleInfo } from "@/constant/index";
  import { RouterLink, RouterView } from "vue-router";
  import WardView from "./WardView.vue";
  import { ElSelect, ElOption } from 'element-plus';
  import axios from 'axios'; // 引入axios

  export default defineComponent({
    components: {
      WardView,
      ElSelect,
      ElOption
    },
    setup() {
      const instance = getCurrentInstance();
      const secondColumnValues = computed(() => {
        if (instance && instance.proxy) {
          return instance.proxy.$route.query.secondColumnValues as string || '';
        }
        return '';
      });
      
      const decorationColors = ["#568aea", "#000000"];
      const loading = ref<boolean>(true);
      const timeInfo = reactive({
        setInterval: 0,
        dateDay: "",
        dateYear: "",
        dateWeek: "",
      });
      
      // 初始化options为响应式数组
      const options = ref([
        { value: '', label: '请选择' } // 默认提示选项
      ]);
      const selectedOption = ref('');

      // 从接口获取选项数据（使用iiiDataType字段）
      const fetchOptions = async () => {
        try {
          const response = await axios.get(
            window.globalConfig.baseApi +'/api/Nurse/GetAllStatisticsDataJson',
            { params: { IDataType: 1 } }
          );
          
          // 从接口返回数据中提取iiiDataType字段（匹配提供的JSON结构）
          const newOptions = response.data.map((item: any) => ({
            value: item.iiiDataType, // 使用iiiDataType作为value
            label: item.iiiDataType  // 使用iiiDataType作为显示文本
          }));
          
          // 更新选项列表（保留默认提示选项）
          options.value = [
            { value: '', label: '请选择' },
            ...newOptions
          ];
        } catch (error) {
          console.error('获取选项数据失败:', error);
        }
      };


    watch(
      () => selectedOption.value,
      (newVal) => {
        if (newVal && instance && instance.proxy) {
          instance.proxy.$router.push({
            query: {
              ...instance.proxy.$route.query,
              secondColumnValues: newVal
            }
          });
        }
      }
    );

      const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();

      onMounted(() => {
        cancelLoading();
        handleTime();
        windowDraw();
        calcRate();
        fetchOptions(); // 挂载时获取选项数据
      });

      onUnmounted(() => {
        unWindowDraw();
        clearInterval(timeInfo.setInterval);
      });

      const cancelLoading = () => {
        setTimeout(() => {
          loading.value = false;
        }, 500);
      };

      const handleTime = () => {
        timeInfo.setInterval = setInterval(() => {
          const date = new Date();
          timeInfo.dateDay = formatTime(date, "HH: mm: ss");
          timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
          timeInfo.dateWeek = WEEK[date.getDay()];
        }, 1000);
      };

      const filterOptions = (query: string) => {
        if (!query) {
          return options.value;
        }
        return options.value.filter(option => option.label.includes(query));
      };

      return {
        loading,
        timeInfo,
        appRef,
        title,
        subtitle,
        moduleInfo,
        selectedOption,
        options,
        secondColumnValues,
      };
    },
    methods: {
      goToHomePage() {
        this.$router.push({ name: "Index" });
      }
    },
  });
  </script>
    
  <style lang="scss" scoped>
  @import "../inpatientsDetailsCSS/FenYangWard.scss";
  .seop{
    font-size: 3px;
    height: 50px;
  }
 </style>